<template>
  <body>
    <div class="addCourse">
      <el-row>
        <el-col :span="20">
          <div class="course">
            <el-form :model="addCourse" ref="course">
              <el-form-item prop="courseName">
                <el-row>
                  <el-col :span="3">
                    <span class="span">课程名称</span>
                  </el-col>
                  <el-col :span="19">
                    <el-input size="mini" v-model="addCourse.courseName" placeholder="请输入课程名称"></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item prop="courseAbbreviation">
                <el-row>
                  <el-col :span="3">
                    <span class="span">课程简称</span>
                  </el-col>
                  <el-col :span="19">
                    <el-input size="mini" v-model="addCourse.courseAbbreviation" placeholder="请输入课程简称"></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item prop="courseCoverThumbnail">
                <el-row>
                  <el-col :span="3">
                    <span class="span">课程封面</span>
                  </el-col>
                  <el-col :span="5">
                    <el-upload class="avatar-uploader"
                    :show-file-list="false"
                    action="active.addCourse"
                    accept="image/jpeg, image/jpg, image/png"
                    :auto-upload="false"
                    :limit="1"
                    v-model="addCourse.courseCoverThumbnail"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                      <img v-if="imageUrl" :src="imageUrl" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item prop="courseTrainObjective">
                <el-row>
                  <el-col :span="3">
                    <span class="span">核心培养目标</span>
                  </el-col>
                  <el-col :span="19">
                    <el-input size="mini" type="textarea" :autosize="{ minRows: 1.5, maxRows: 4}" placeholder="请输入核心培养目标" v-model="addCourse.courseTrainObjective"></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
              <div style="margin: 15px 0;"></div>
              <el-form-item prop="courseTeachGoal">
                <el-row>
                  <el-col :span="3">
                    <span class="span">教学目标</span>
                  </el-col>
                  <el-col :span="19">
                    <el-input size="mini" type="textarea" :autosize="{ minRows: 1.5, maxRows: 4}" placeholder="请输入教学目标" v-model="addCourse.courseTeachGoal"></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
              <div style="margin: 15px 0;"></div>
              <el-form-item prop="courseTeachMethod">
                <el-row>
                  <el-col :span="3">
                    <span class="span">教学方法</span>
                  </el-col>
                  <el-col :span="19">
                    <el-input size="mini" type="textarea" :autosize="{ minRows: 1.5, maxRows: 4}" placeholder="请输入教学方法" v-model="addCourse.courseTeachMethod"></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
              <div style="margin: 10px 0;"></div>
              <el-form-item prop="courseTypeName">
                <el-row>
                  <el-col :span="3">
                    <span class="span">课程系列</span>
                  </el-col>
                  <el-col :span="19">
                    <div>
                      <el-select size="mini" v-model="addCourse.courseTypeName" slot="prepend" placeholder="请选择课程系列">
                        <el-option label="Java课程体系" value="1"></el-option>
                        <el-option label="PHP课程体系" value="2"></el-option>
                      </el-select>
                    </div>
                  </el-col>
                </el-row>
              </el-form-item>
              <div style="margin: 10px 0;"></div>
              <el-form-item prop="courseLanguageName">
                <el-row>
                  <el-col :span="3">
                    <span class="span">课程语言</span>
                  </el-col>
                  <el-col :span="19">
                    <div>
                      <el-select size="mini" v-model="addCourse.courseLanguageName" slot="prepend" placeholder="请选择课程语言">
                        <el-option label="图形化编程" value="1"></el-option>
                        <el-option label="PHP" value="2"></el-option>
                        <el-option label="Java" value="3"></el-option>
                        <el-option label="C++" value="4"></el-option>
                        <el-option label="JavaSciipt" value="5"></el-option>
                        <el-option label="Python" value="6"></el-option>
                      </el-select>
                    </div>
                  </el-col>
                </el-row>
              </el-form-item>
              <div style="margin: 10px 0;"></div>
              <el-form-item prop="beforeCourseName">
                <el-row>
                  <el-col :span="3">
                    <span class="span">前导课程</span>
                  </el-col>
                  <el-col :span="19">
                    <div>
                      <el-select size="mini" v-model="addCourse.beforeCourseName" slot="prepend" placeholder="请选择前导课程">
                        <el-option label="图形化编程" value="1"></el-option>
                        <el-option label="PHP" value="2"></el-option>
                        <el-option label="Java" value="3"></el-option>
                        <el-option label="C++" value="4"></el-option>
                        <el-option label="JavaSciipt" value="5"></el-option>
                        <el-option label="Python" value="6"></el-option>
                      </el-select>
                    </div>
                  </el-col>
                </el-row>
              </el-form-item>
              <div style="margin: 10px 0;"></div>
              <el-form-item prop="afterCourseName">
                <el-row>
                  <el-col :span="3">
                    <span class="span">后续课程</span>
                  </el-col>
                  <el-col :span="19">
                    <div>
                      <el-select size="mini" v-model="addCourse.afterCourseName" slot="prepend" placeholder="后续课程">
                        <el-option label="图形化编程" value="1"></el-option>
                        <el-option label="PHP" value="2"></el-option>
                        <el-option label="Java" value="3"></el-option>
                        <el-option label="C++" value="4"></el-option>
                        <el-option label="JavaSciipt" value="5"></el-option>
                        <el-option label="Python" value="6"></el-option>
                      </el-select>
                    </div>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item>
                <el-row>
                  <el-col :span="5">
                     <el-button type="primary" size="mini" @click="course(course)">提交</el-button>
                     <el-button plain size="mini">取消</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </div>
  </body>
</template>

<script>
import http from '@/utils/HttpUtil'
export default {
  data () {
    return {
      addCourse: {
        courseName: '',
        courseAbbreviation: '',
        courseCoverThumbnail: '',
        courseTrainObjective: '',
        courseTeachGoal: '',
        courseTeachMethod: '',
        courseTypeName: '',
        courseLanguageName: '',
        beforeCourseName: '',
        afterCourseName: ''
      },
      imageUrl: '',
      active: {
        addCourse: 'LearningPlatform/manager/course/addCourse'
      }
    }
  },
  components: {

  },
  methods: {
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    course (refName) {
      // 获取输入框数据
      const param = this.addCourse
      // 发送请求，实现新增
      http.xhrPost(this, this.active.addCourse, param, (res) => {
        this.$message({
          type: 'success',
          message: res.message
        })
        // 重置表单
        this.$refs[refName].resetFields()
      })
    }
  }
}
</script>

<style scoped="scoped">
 @import url("../assets/css/addCourse.css");
</style>
